<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>优化节点添加</title>
</head>

<body>

  <script>
    for (var i = 0; i < 10; i++) {
      var p = document.createElement('p');
      p.innerHTML = i;
      document.body.appendChild(p);
    }


    //文档碎片添加(优)
    const fragEle = document.createDocumentFragment();
    for (var i = 0; i < 10; i++) {
      var p = document.createElement('p');
      p.innerHTML = i;
      fragEle.appendChild(p);
    }
    document.body.appendChild(fragEle);
  </script>
</body>

</html>